<template>
	<view class="container">
		<view class="input-container">
			<view class="input-container-title">修改密码</view>
			<view class="input-item">
				<input type="password" class="content" :class="{'is-shake':oldShake}" placeholder="请输入旧密码" v-model="oldPass" />
			</view>
			<view class="input-item">
				<input type="password" class="content" :class="{'is-shake':newShake}" placeholder="请输入新密码" v-model="newPass" />
			</view>
			<view class="input-item">
				<input type="password" class="content" :class="{'is-shake':chkShake}" placeholder="请确认新密码" v-model="chkPass" />
			</view>
			<view class="input-item"><button type="primary" class="content" @tap="submit">确认</button></view>
		</view>
	</view>
</template>

<script>
import routeHanlder from '@/util/routeUtil.js';
export default {
	name: 'modifyPassword',
	data() {
		return {
			oldPass: '',
			newPass: '',
			chkPass: '',
			oldShake: false,
			newShake: false,
			chkShake: false,
			returnUrl: ''
		};
	},
	methods: {
		submit(){
			if(!this.checkSubmit()){
				return
			}
			this.$http.request({
				url: 'api/LivePush/ChangePassword',
				method: 'POST',
				data:{
					oldPassword: this.oldPass,
					newPassword: this.newPass
				}
			}).then(()=>{
				uni.showToast({
					icon: 'success',
					title: '修改成功'
				})
				uni.navigateTo({
					url: '../index/index'
				})
			}).catch(err=>{
				this.animateShake('old')
			})
		},
		checkSubmit(){
			if(!this.oldPass){
				uni.showToast({
					icon: 'none',
					title: '请输入旧密码'
				})
				this.animateShake('old')
				return false
			}
			if(!this.newPass){
				uni.showToast({
					icon: 'none',
					title: '请输入新密码'
				})
				this.animateShake('new')
				return false
			}
			if(!this.chkPass){
				uni.showToast({
					icon: 'none',
					title: '请确认新密码'
				})
				this.animateShake('chk')
				return false
			}
			if(this.newPass != this.chkPass){
				uni.showToast({
					icon: 'none',
					title: '两次输入密码不一致'
				})
				this.animateShake('all')
				return false
			}
			return true
		},
		animateShake(type){
			this.oldShake = false
			this.newShake = false
			this.chkShake = false
			switch(type){
				case 'old':
					setTimeout(()=>{this.oldShake = true}, 100)
					break
				case 'new':
					setTimeout(()=>{this.newShake = true}, 100)
					break
				case 'chk':
					setTimeout(()=>{this.chkShake = true}, 100)
					break
				case 'all':
					setTimeout(()=>{
						this.newShake = true
						this.chkShake = true
					}, 100)
					break
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.input-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 100rpx;
	.input-container-title {
		font-size: 50rpx;
		margin-bottom: 100rpx;
	}
	.input-item {
		width: 75%;
		margin: 0 auto;
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		font-size: 35rpx;
		padding: 20rpx 0;
		.content {
			flex-grow: 1;
			flex-shrink: 1;
			border-bottom: 1px solid $uni-color-divider;
			margin: 20rpx 0;
		}
		.is-shake{
			animation: shake 1s;
		}
		@keyframes shake{
			0%{transform: translateX(0);}
			25%{transform: translateX(50rpx);}
			50%{transform: translateX(-50rpx);}
			75%{transform: translateX(50rpx);}
			100%{transform: translateX(0);}
		}
	}
}
</style>
